<script lang="ts" setup>
// #region 引入包, 函数和组件
import { useTemplateRef } from 'vue'
import { type FormInstance } from 'element-plus'
import type { QuertListParams } from '@/service/type';
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
interface Emits {
  queryList: []
}

const form = defineModel<QuertListParams>('form')
const emits = defineEmits<Emits>()
// #endregion

// #region // 变量
const formRef = useTemplateRef<FormInstance>('formRef')
// #endregion

// #region // 函数
const resetFields = (el: FormInstance | null) => {
  if (el && form.value) {
    el.resetFields()
    form.value.page = 1
    emits('queryList')
  }
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <el-form class="list_search" :model="form" :status-icon="true" ref="formRef">
    <el-form-item label="用户名: " prop="username">
      <el-input placeholder="用户名" v-model="form!.username"></el-input>
    </el-form-item>
    <el-form-item label="年龄: " prop="age">
      <el-input placeholder="年龄" type="number" v-model.number="form!.age"></el-input>
    </el-form-item>
    <el-form-item label="性别: " prop="sex">
      <el-select v-model="form!.sex" placeholder="性别">
        <el-option label="男" :value="1" />
        <el-option label="女" :value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="邮箱: " type="email" prop="email">
      <el-input placeholder="邮箱" v-model="form!.email"></el-input>
    </el-form-item>
  </el-form>
  <div class="btns">
    <el-button @click="emits('queryList')">查询</el-button>
    <el-button @click="resetFields(formRef)">重置</el-button>
  </div>
</template>

<style lang="scss" scoped>
.el-form {
  display: flex;
  overflow: hidden;
  align-items: center;
  .el-form-item {
    min-width: 150px;
    margin-right: 10px;
  }
}
</style>
